<template>
  <el-form ref="menuFormRef" :rules="rules" :model="menuForm" label-width="100px">
    <!-- 菜单名称 -->
    <el-form-item :label="modular === 'master' ? '主菜单名称' : '子菜单名称'" prop="name">
      <el-input v-model="menuForm.name" />
    </el-form-item>

    <!-- 菜单类型 -->
    <el-form-item label="主菜单类型" prop="menuType" v-if="modular === 'master'">
      <el-radio-group v-model="menuForm.menuType">
        <el-radio :value="0">不配置子菜单</el-radio>
        <el-radio :value="1">配置子菜单</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="" v-if="menuForm.menuType && modular === 'master'">
      <slot></slot>
    </el-form-item>
    <template v-if="!menuForm.menuType">
      <!-- 跳转链接 -->
      <el-form-item label="跳转链接" prop="visitType">
        <el-radio-group v-model="menuForm.visitType">
          <el-radio label="view">网页</el-radio>
          <el-radio label="miniprogram">小程序</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 网址 -->
      <el-form-item label="网址" prop="url">
        <el-input v-model="menuForm.url" />
      </el-form-item>

      <template v-if="menuForm.visitType == 'miniprogram'">
        <!-- AppId -->
        <el-form-item label="AppId" prop="appId">
          <el-input v-model="menuForm.appId" />
        </el-form-item>

        <!-- 路径 -->
        <el-form-item label="路径" prop="pagePath">
          <el-input v-model="menuForm.pagePath" />
        </el-form-item>
      </template>
    </template>
  </el-form>
</template>

<script lang="ts" setup>
import { rules } from './useMenuOa'
import type { FormInstance } from 'element-plus'
const emit = defineEmits([
  'update:name',
  'update:menuType',
  'update:visitType',
  'update:url',
  'update:appId',
  'update:pagePath'
])
interface IProp {
  modular?: string
  name?: string
  menuType?: number
  visitType?: string
  url?: string
  appId?: string
  pagePath?: string
}
const props = withDefaults(
  defineProps<IProp>(),
  {
    modular: 'master',
    name: '',
    menuType: 0,
    visitType: 'view',
    url: '',
    appId: '',
    pagePath: ''
  }
)

const menuFormRef = shallowRef<FormInstance>()
// 表单数据
// const menuForm = ref({ ...props })
const propsRef = toRefs(props)
const menuForm = ref({
  modular: propsRef.modular.value,
  name: propsRef.name.value,
  menuType: propsRef.menuType.value,
  visitType: propsRef.visitType.value,
  url: propsRef.url.value,
  appId: propsRef.appId.value,
  pagePath: propsRef.pagePath.value
})

watch(
  () => props,
  (newVal) => {
    menuForm.value = {
      modular: newVal.modular,
      name: newVal.name,
      menuType: newVal.menuType,
      visitType: newVal.visitType,
      url: newVal.url,
      appId: newVal.appId,
      pagePath: newVal.pagePath
    }
  },
  { immediate: true }
)

watchEffect(() => {
  if (props.modular === 'master') {
    emit('update:menuType', menuForm.value.menuType)
  }
  emit('update:name', menuForm.value.name)
  emit('update:visitType', menuForm.value.visitType)
  emit('update:url', menuForm.value.url)
  emit('update:appId', menuForm.value.appId)
  emit('update:pagePath', menuForm.value.pagePath)
})



defineExpose({
  menuFormRef
})
</script>
